import React, { Component } from 'react';
import '../asserts/css/common.css';
import '../asserts/css/coupon.css';
import {timestamp } from '../request/coupon'
import {connect} from 'react-redux'
import {asyncInitAction} from '../redux/coupon/couponAction' 
class Coupon extends Component {
    state = {
        index: 0
    }
    UNSAFE_componentWillMount() {
        let userinfo = JSON.parse(localStorage.getItem('logindata'))
         this.props.initAction(userinfo.uid)
    }
    render() {
        let { index } = this.state
        return (
            <div className="coupon-container">
                <div className="page-title">优惠券</div>
                <div className="tabs">
                    <div className={index === 0 ? 'active' : ""} onClick={() => { this.setState({ index: 0 }) }}>未使用</div>
                    <div className={index === 1 ? 'active' : ""} onClick={() => { this.setState({ index: 1 }) }}>已使用</div>
                    <div className={index === 2 ? 'active' : ""} onClick={() => { this.setState({ index: 2 }) }}>已失效</div>
                </div>
                <div className="list">
                    {
                        this.props.couponList[index].content.map(item => {
                            return <div className="item" key={item.id}>
                                <div className="content">
                                    <div className="price">
                                        <h2>&yen; <span>{item.money}</span></h2>
                                        <small className="tips">满{item.limit_money}元可用</small>
                                    </div>
                                    <div>
                                        <p>{item.title}</p>
                                        <small>{timestamp(item.begintime)}至{timestamp(item.endtime)}</small>
                                    </div>
                                </div>
                                <div className="rules">
                                    使用规则: {item.description}
                             </div>
                            </div>
                        })
                    }
                </div>
            </div>
        );
    }
}
export const mapStateToProps = state=>{
    return {
        couponList:state.coupon
    }
}
export const mapDispatchToProps = dispatch => {
    return {
        initAction:(id)=>dispatch(asyncInitAction(id))
    }
}
export default connect(mapStateToProps,mapDispatchToProps)(Coupon);